﻿/**
 * jQuery TwiLoadingMask plugin
 * @Author：feitianxinhong http://xuzhihong1987.blog.163.com/  
 * @Version：1.1.0
 * @CreateDate：2015-03-27
 * @Example: Visit http://blog.163.com/twi_fly  
 * @Copyright ©2010-2015 Tyingsoft 踏影软件开发工作室 之 Twilight/Twifly开源系列. 转载请保留本行注明.   
 * @License：Twi Framework of Tyingsoft is licensed under the MIT license.  
 * @Description：基于jquery+Bootstrap的窗体控件
 * @Require:  
 *
 * ------------------------------------------------------------------
 * 编号    版本号      作者              修改日期         修改内容
 * ------------------------------------------------------------------
 *  1      1.0.0      feitianxinhong    2013-08-20      创建文件
 *  2      1.0.1      feitianxinhong    2014-05-18      大字体版
 *  3      1.1.0      feitianxinhong    2015-03-27      增加响应，去掉了图片，兼容Twi.Skin概念主题样式
 * ------------------------------------------------------------------
 */
(function () {
    var global = this;
    if (typeof Twi === 'undefined') {
        global.Twi = {};
    }
    Twi.global = global;
    Twi.LoadingMask = function (config) {
        var me = this;
        me.VERSION = '1.1.0';  //版本号 
        me.PUBLICTIME = '2015-03-28 12:21:45'; //发布时间，辅助区分版本

        /**
         *默认配置项 
         */
        me.defaults = {
            msg: '系统正在处理,请稍候...',
            skin:'auto'
        };

        config = config || {};  
        me.config = $.extend({}, me.defaults, config);
        me.id = "TwiLoadingMask" + Math.floor(100000 * Math.random()); //随机ID   
       
    }

    /**
     * 获取Id
     */
    Twi.LoadingMask.prototype.getId = function () {
        return this.id;
    }

    /**
     * 显示
     */
    Twi.LoadingMask.prototype.show = function () {
        var me = this;
        var html = '<div class="twiLoadingMask" id="' + me.id + '">';
        html += '<div class="twiLoadingMaskBg"></div>';
        html += '<div class="twiLoadingMaskCnt">';
        
        html += '<div class="twiLoadingMaskTop"></div>';
        html += '<div class="twiLoadingMaskMid"></div>';
        html += '<div class="twiLoadingMaskBtm"></div>';
        html += '<div class="twiLoadingMaskMsg">' + me.config.msg + '</div>';
        html += '</div>';
        html += '</div>';
        $('body').append(html);

        //修改主题
        me.changeSkin(getSkinName(me.config.skin));

        //动画效果
        var widthPercent = 0;
        var tlmBtm = $('#' + this.id).find('.twiLoadingMaskBtm');
        (function progressBarAnimate() {
            tlmBtm.animate({
                width: '100%'
            }, 3000, function () {
                widthPercent = 100;
                tlmBtm.width(0);
                //自动主题，每轮更换
                if (me.config.skin == "auto") {
                    me.changeSkin(getSkinName());
                }
                progressBarAnimate();
            });
        })();
    }

    /**
     * 隐藏
     */
    Twi.LoadingMask.prototype.hide = function () {
        $('#' + this.id).remove();
    }

    /**
     * 改变主题样式
     * @skinName:修改后的主题
     */
    Twi.LoadingMask.prototype.changeSkin = function (skinName) {        
        var me = this;
        var skin = Twi.Skin[skinName];
        if (!skin) { return; } //不存在的主题
        
        var tlmBg = $('#' + me.id).find('.twiLoadingMaskBg');
        var tlmCnt = $('#' + me.id).find('.twiLoadingMaskCnt');
        var tlmMid = $('#' + me.id).find('.twiLoadingMaskMid');
        var tlmBtm = $('#' + me.id).find('.twiLoadingMaskBtm');
        //var tlmMsg = $('#' + me.id).find('.twiLoadingMaskMsg');

        tlmBg.css({
            "background-color": skin.skinColor
        });
        tlmCnt.css({
            "border-color": skin.skinColor
        });
        tlmMid.css({
            "background-color": skin.skinColor
        });
        tlmBtm.css({
            "background-color": skin.skinColor
        });
        //tlmMsg.css({
        //    "color": skin.skinColor
        //});
    }

   /**
    * Twi.Skin:概念主题
    */
    Twi.Skin = Twi.Skin || {
        turquoise: {
            skinColor: '#1ABC9C',
            skinColor2: '#16A085',
            skinName: '绿松石',
            skinCode: 'turquoise',
            skinIndex: 0
        },
        sunorange: {
            skinColor: '#F1C40F',
            skinColor2: '#F39C12',
            skinName: '向日橙',
            skinCode: 'sunorange',
            skinIndex: 1
        },
        dreamblue: {
            skinColor: '#3498DB',
            skinColor2: '#2980B9',
            skinName: '梦之蓝',
            skinCode: 'dreamblue',
            skinIndex: 2
        },
        amethyst: {
            skinColor: '#9B59B6',
            skinColor2: '#8E44AD',
            skinName: '紫水晶',
            skinCode: 'amethyst',
            skinIndex: 3
        },
        emerland: {
            skinColor: '#2ECC71',
            skinColor2: '#27AE60',
            skinName: '祖母绿',
            skinCode: 'emerland',
            skinIndex: 4
        },
        rainright: {
            skinColor: '#34495E',
            skinColor2: '#2C3E50',
            skinName: '黑雨夜',
            skinCode: 'rainright',
            skinIndex: 5
        },
        alizarin: {
            skinColor: '#E74C3C',
            skinColor2: '#C0392B',
            skinName: '茜素红',
            skinCode: 'alizarin',
            skinIndex: 6
        },
        brown: {
            skinColor: '#E67E22',
            skinColor2: '#D35400',
            skinName: '古韵棕',
            skinCode: 'brown',
            skinIndex: 7
        }
    };

   /**
    * 获取主题名
    */
    function getSkinName(skinName) {
        if (!skinName || skinName =='auto') {
            //未设置则为随机选定主题
            var twiSkins = ['turquoise', 'sunorange', 'dreamblue', 'amethyst', 'emerland', 'rainright', 'alizarin', 'brown'];
            var nRandom = Math.floor(100 * Math.random()); // 这里返回 [0,99]                 
            var index = nRandom % twiSkins.length;
            skinName = twiSkins[index];
        }
        return skinName;
    }//end getCurrent
})();

